packages/editor/src/core/extensions/side-menu.tsx (3)

81-83: Approve: Conditional initialization of AI handle

This change effectively prevents multiple initializations of the AI handle, addressing the issue described in the PR. Good job!

Consider caching the result of editorSideMenu.querySelector("#ai-handle") to avoid repeated DOM queries:

const aiHandle = editorSideMenu.querySelector("#ai-handle");
if (handlesConfig.ai && !aiHandle) {
  aiHandleView(view, editorSideMenu);
}

This minor optimization could improve performance, especially if this code is executed frequently.

---

85-87: Approve: Conditional initialization of drag handle

This change successfully prevents multiple initializations of the drag handle, addressing the issue described in the PR. Well done!

Similar to the AI handle, consider caching the result of the querySelector to optimize performance:

const dragHandle = editorSideMenu.querySelector("#drag-handle");
if (handlesConfig.dragDrop && !dragHandle) {
  dragHandleView(view, editorSideMenu);
}

This minor optimization could improve performance, especially if this code is executed frequently.

---

Line range hint 41-157: Consider optimizing handle initialization

The current implementation checks for the existence of handles on every mousemove event. While this works, it may be more efficient to perform these checks once during the plugin's initialization.

Consider refactoring the SideMenu plugin to initialize the handles only once:

const SideMenu = (options: SideMenuPluginProps) => {
  const { handlesConfig } = options;
  const editorSideMenu: HTMLDivElement | null = document.createElement("div");
  editorSideMenu.id = "editor-side-menu";
  
  // ... (other code)

  let aiHandleInitialized = false;
  let dragHandleInitialized = false;

  return new Plugin({
    key: new PluginKey("sideMenu"),
    view: (view) => {
      hideSideMenu();
      view?.dom.parentElement?.appendChild(editorSideMenu);
      
      // Initialize handles once
      if (handlesConfig.ai && !aiHandleInitialized) {
        aiHandleView(view, editorSideMenu);
        aiHandleInitialized = true;
      }
      
      if (handlesConfig.dragDrop && !dragHandleInitialized) {
        dragHandleView(view, editorSideMenu);
        dragHandleInitialized = true;
      }

      // ... (rest of the code)
    },
    props: {
      handleDOMEvents: {
        mousemove: (view, event) => {
          // ... (existing mousemove logic)
          
          // Remove handle checks from here
          showSideMenu();
          if (handlesConfig.dragDrop) {
            dragHandleDOMEvents?.mousemove();
          }
          if (handlesConfig.ai) {
            aiHandleDOMEvents?.mousemove?.();
          }
        },
        // ... (other event handlers)
      },
    },
  });
};

This approach would initialize the handles only once when the plugin is created, potentially improving performance by avoiding repeated DOM queries on every mousemove event.

Configuration used: CodeRabbit UI
Review profile: CHILL

packages/editor/src/core/plugins/ai-handle.ts (1)

Multiple Usages of nodeDOMAtCoords Still Present in Codebase

The nodeDOMAtCoords function is still being used in several files, which will cause runtime errors if not addressed.

Affected Files:

• packages/editor/src/core/plugins/ai-handle.ts
• packages/editor/src/core/plugins/drag-handle.ts
• packages/editor/src/core/extensions/side-menu.tsx

Analysis chain

Line range hint 71-75: Update handleClick function to handle removal of nodeDOMAtCoords

The nodeDOMAtCoords function has been removed, but it's still being used in the handleClick function. This will cause a runtime error. The functionality of nodeDOMAtCoords needs to be replaced or reimplemented.

Please update the handleClick function to handle the removal of nodeDOMAtCoords. This may involve reimplementing the functionality directly in this function or using an alternative method to determine the node at the given coordinates.

To verify the usage of nodeDOMAtCoords in other parts of the codebase, run the following script:

This will help identify if the function is still being used elsewhere and needs to be updated or if it has been completely removed from the project.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for other usages of nodeDOMAtCoords in the codebase

# Test: Search for usages of nodeDOMAtCoords
rg --type typescript 'nodeDOMAtCoords'

Length of output: 73

---

Script:

#!/bin/bash
# Description: Check for other usages of nodeDOMAtCoords in the codebase

# Test: Search for usages of nodeDOMAtCoords
rg --type ts 'nodeDOMAtCoords'

Length of output: 715

packages/editor/src/core/extensions/custom-image/components/image-block.tsx (1)

Line range hint 148-152: LGTM! Consider documenting the purpose of the new class.

The addition of the "image-component" class to the image element is a good change. It provides a more specific selector for styling or JavaScript operations targeting these image components.

To improve maintainability, consider adding a brief comment explaining the purpose of the "image-component" class, especially if it's used for specific styling or functionality elsewhere in the application.

Configuration used: CodeRabbit UI
Review profile: CHILL